<!-- 
    说明： 查看职位详情
 -->
<template>
  <section class="page">
    <pageCom>
        <div class="content-page">
            <div class="main">
                <div class="nav-com">
                    <el-breadcrumb
                        separator-class="el-icon-arrow-right"
                        style="margin-bottom: 20px"
                    >
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ name: 'userCenter' }"
                        >用户中心</el-breadcrumb-item
                        >
                        <el-breadcrumb-item :to="{ name: 'registrationProduct' }"
                        >报名项目</el-breadcrumb-item
                        >
                        <el-breadcrumb-item>
                        <span style="color: #3d6cb0">报名项目详情</span>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                    </div>
                    <div class="base-info" v-if="info && info.title">
                        <div class="title">报名项目</div>
                        <div class="product-info">
                            <div class="row-text">
                                <span>项目名称:</span> {{ info.title }}
                            </div>
                            <div class="row-text">
                                <span>比赛日期:</span> {{ info.startTime }} ~ {{ info.endTime }}
                            </div>
                            <div class="row-text">
                                <span>报名时间:</span> {{ info.entryTime }}
                            </div>
                            <div class="row-text">
                                <span>作品截止上传日期:</span> {{ info.closingDate }}
                            </div>
                        </div>
                        <!-- 	// 报名类型;1:团队;2:个人-->
                        <div v-if="Number(info.entryType) === 1">
                            <div class="personal-title">团队信息</div>
                            <el-row>
                                <el-col :span="3">
                                    <p class="user-text-left">
                                        参赛团队：
                                    </p>
                                </el-col>
                                <el-col :span="21">
                                    <p class="user-text-right">
                                        {{  info.teamName }}
                                    </p>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3">
                                    <p class="user-text-left">
                                        团队介绍：
                                    </p>
                                </el-col>
                                <el-col :span="21">
                                    <p class="user-text-right">
                                        {{  info.introduce }}
                                    </p>
                                </el-col>
                            </el-row>
                            <el-row v-if="Array.isArray(info.stuList) && info.stuList.length">
                                <el-col :span="3">
                                    <p class="user-text-left">
                                        参赛选手：
                                    </p>
                                </el-col >
                                <el-col :span="16" >
                                    <div class="table-view">
                                        <el-row>
                                            <el-col :span="2">
                                                <p class="text-col head">编号</p>
                                            </el-col>
                                            <el-col :span="3"> <p class="text-col head">类型</p></el-col>
                                            <el-col :span="3"> <p class="text-col head">姓名</p></el-col>
                                            <el-col :span="6"> <p class="text-col head">手机号</p></el-col>
                                            <el-col :span="6"> <p class="text-col head">学校</p></el-col>
                                            <el-col :span="4"> <p class="text-col head">专业</p></el-col>
                                        </el-row>
                                        <el-row v-for="(item, index) in info.stuList" :key="index" style="position: relative;">
                                            <el-col :span="2">
                                                <p class="text-col">{{ index + 1 }}</p>
                                            </el-col>
                                            <el-col :span="3">
                                                <p class="text-col cursor-pointer">
                                                    {{ item.jobType === 1 ? '队长':'队员' }}
                                                </p>
                                            </el-col>
                                            <el-col :span="3">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.studentName"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.studentName }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.mobile"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.mobile }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.schoolName"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.schoolName }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                            <el-col :span="4">
                                                <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.major"
                                                placement="top"
                                                >
                                                <p class="text-col cursor-pointer">
                                                    {{ item.major }}
                                                </p>
                                                </el-tooltip>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-if="Number(info.entryType) === 2">
                            <div class="personal-title">个人信息</div>
                            <el-row>
                                <el-col :span="10">
                                    <p class="user-text-left">
                                        <span class="label">参赛者：</span> 
                                        <span class="value">{{ info.teamName || '--' }}</span> 
                                    </p>
                                </el-col >
                                <el-col :span="10">
                                    <p class="user-text-left">
                                        <span class="label">手机号：</span> 
                                        <span class="value">{{ currentMan.mobile || '--' }}</span> 
                                    </p>
                                </el-col>
                                <el-col :span="10">
                                    <p class="user-text-left">
                                        <span class="label">学校：</span> 
                                        <span class="value">{{ currentMan.schoolName || '--' }}</span> 
                                    </p>
                                </el-col>
                                <el-col :span="10">
                                    <p class="user-text-left">
                                        <span class="label">专业：</span> 
                                        <span class="value">{{ currentMan.major || '--' }}</span> 
                                    </p>
                                </el-col>
                                <el-col :span="24">
                                    <p class="user-text-left">
                                        <span class="label">个人介绍：</span> 
                                        <span class="value">{{ 
                                        info.introduce }}</span> 
                                    </p>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div class="upload-tips">
                            报名资料 <span>仅支持上传zip格式，仅上传一份文件</span>
                    </div>
                    <div>
                        <div class="zip-show" >
                            <img src="@/assets/images/productManage/zip.png" class="img" alt="">
                            <span class="file-name">{{ info.annexName }}</span>
                            <span class="status">已上传</span>
                            <a class="download-text" :href="info.annexUrl" target="_blank">下载</a>
                        </div>
                    </div>
                    <div class="btn-box" v-if="isTeam && isMaster && canEdit">
                    <ComBtn style="margin: 0 20px" type="cancel" title="取消报名" @handleClick="cancelProduct" />
                    <ComBtn title="修改报名信息" @handleClick="editProduct" />
                    </div>
                    <div class="btn-box" v-else-if="isTeam && !isMaster && canEdit">
                        <p class="not-master-tips">团队报名，仅允许队长修改报名信息，如需请咨询团队长</p>
                    </div>
                    <div class="btn-box" v-else-if="!canEdit">
                        <p class="not-master-tips">报名阶段已结束</p>
                    </div>
                    <div class="btn-box" v-if="!isTeam && canEdit">
                    <ComBtn style="margin: 0 20px" type="cancel" title="取消报名" @handleClick="cancelProduct" />
                    <ComBtn title="修改报名信息" @handleClick="editProduct" />
                    </div>
                </div>
            </div>
    </pageCom>
    
  </section>
</template>

<script>
import vueVideoPlayer from "@/components/videoPlayer/videoPlayer.vue";
import pageCom from "@/components/page/index.vue";
import ComBtn from "../productManage/components/commonBtn";
import moment from 'moment'
import {
  getStudentEntryInfo,
  deleteAnnex
} from "../../request/api";
export default {
  // 组件名称
  name: "productDetail",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { ComBtn, vueVideoPlayer, pageCom },
  // 组件状态值
  data() {
    return {
    // 报名类型;1:团队;2:个人
      entryTypeStr: {
        1: "团队",
        2: "个人",
      },
      tipsList: {
        1004053023: "该手机号未注册",
        // 1004053024: "该队员未身份认证，请先认证",
        1004053024: "您未身份认证，请先完成身份认证",
        // 1004053025: "该队员已个人/团队报名，无法再次参加",
        1004053025: "您已个人/团队报名，无法再次参加",
      },
      id: "",
      studentInfo: {},
      info: {
        id: "",
        title: "",
        projectTypeId: "",
        holdUnitUrl: "",
        holdUnitName: null,
        projectDescription: "",
        entryType: "",
        itemPeopleNum: "",
        entryInformation: "",
        competitionRules: "",
        reviewRules: "",
        reviewRequire: "",
        entryRequire: "",
        projectRewards: "",
        videoUrl: "",
        competitionOrganization: "",
        annexDownType: "",
        status: "",
        weight: "",
        releaseTime: null,
        examineFlag: "",
        examineStatus: "",
        examineNotes: "",
        submitTime: "",
        examinePeople: null,
        examineTime: "",
        scheduleType: "",
        projectTypeName: null,
        annexVOList: [],
        scheduleVOList: [],
      },
      code: "",
      currentMan: {}
    };
  },
  computed: {
    isTeam () {
        // 报名类型;1:团队;2:个人
        return Number(this.info.entryType) === 1
    },
    canEdit () {
        let newDate = moment()
        let startDate = moment(this.info.startTime, 'YYYY-MM-DD HH:mm:ss')
        let endTime = moment(this.info.endTime, 'YYYY-MM-DD HH:mm:ss')
        let entryTime = moment(this.info.entryTime, 'YYYY-MM-DD HH:mm:ss') // 报名时间
        return Number(this.info.scheduleType) === 1 && 
        newDate.isBefore(endTime) &&
        newDate.isAfter(startDate) && 
        newDate.isAfter(entryTime)
    },
    isMaster() {
        let loginUserMobile  = localStorage.getItem('userMobile')
        let master = this.info.stuList.find(item => item.jobType === 1)
        return this.isTeam && master &&  (master.mobile === loginUserMobile)
    }
  },
  created() {
    let id = this.$route.query.id;
    if (id) {
      this.id = id;
      this.init();
    } else {
      this.$message.warning("数据不存在，请稍后重试");
      setTimeout(() => {
        this.$router.go(-1);
      }, 2000);
    }
  },
  // 组件方法
  methods: {
    cancelProduct() {
        this.$confirm("确认取消报名吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(() => {
            this.deleteItem()
          })
          .catch(() => {});
    },
    editProduct() {
        console.log('editProduct')
        this.$router.push({name: 'editEntryProduct', query: {id: this.id}})
    },
    deleteItem(item){
        deleteAnnex({id: this.id}).then(res => {
            if (res && res.code === 0) {
                this.$message.success('取消报名成功')
                this.$router.replace({name: 'registrationProduct'})
            } else {
                this.$message.error(res.msg || '请稍后重试');
            }
        })
    },
    init() {
      let params = {
        id: this.id,
      };
      getStudentEntryInfo(params).then((res) => {
        console.log("项目详情", res);
        if (res.code === 0 && res.data) {
          this.info = res.data;
          // 报名类型;1:团队;2:个人
          if(Number(this.info.entryType) === 2 && Array.isArray(this.info.stuList) && this.info.stuList.length){
            this.currentMan = this.info.stuList[0]
          }
        }
      });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f8fa;
  .bottom-line {
    border-bottom: 1px solid #eaeaea;
  }
  .content-page {
    position: relative;
    width: 100%;
    height: 100%;
    .banner {
      position: relative;
      width: 100%;
      height: 220px;
      .banner-bg {
        position: relative;
        width: 100%;
        height: 220px;
        object-fit: cover;
      }
      .banner-text {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        transform: translate3d(0, -50%, 0);
        font-size: 38px;
        font-family: "PingFangSC-Light, PingFang SC";
        font-weight: 300;
        color: #ffffff;
        line-height: 53px;
      }
    }
    .search {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      margin-bottom: 20px;
      padding-left: 30px;
      position: relative;
      .search-icon {
        width: 18px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 10px;
      }
      .search-select {
        width: 160px;
        margin-right: 13px;
      }
    }
    .main {
      background: #fff;
      width: 1200px;
      margin: 15px auto 0;
      padding: 23px 30px;
      min-height: 500px;
    }
    .product-info {
        position: relative;
        background: #F9F9F9;
        border-radius: 6px;
        border: 1px solid #F0F0F0;
        padding: 30px 20px;
        margin-bottom: 35px;
        .row-text {
            position: relative;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597A0;
            line-height: 25px;
            margin: 15px 0;
        }
    }
    .personal-title {
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383D;
        line-height: 28px;
        margin-bottom: 31px;
    }
    .user-text-left {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597A0;
        line-height: 25px;
        margin-bottom: 23px;
    }
    .user-text-right {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383D;
        line-height: 25px;
        margin-bottom: 23px;
    }
    .table-view {
        width: 100%;
        background: #ffffff;
        border-top: 1px solid #d4d6da;
        border-left: 1px solid #d4d6da;
        .text-col {
            border-right: 1px solid #d4d6da;
            border-bottom: 1px solid #d4d6da;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 40px;
            text-align: center;
            width: 100%;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 5px;
        }
        .cursor-pointer {
            cursor: pointer;
        }
        .head {
            background: #f6f7f8;
        }
        .href-link {
            cursor: pointer;
            color: #3d6cb0;
        }
    }
    .upload-tips {
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 28px;
      margin-bottom: 23px;
      margin-top: 35px;
      span {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #c4c4c4;
        line-height: 21px;
        margin-left: 15px;
      }
    }
    .zip-show {
        position: relative;
        width: 100%;
        height: 60px;
        border: 1px dashed #D4D6DA;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        padding-left: 20px;
        .img {
            width: 25px;
            height: 25px;
            margin-right: 15px;
        }
        .file-name {
            max-width: 50%;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383D;
            line-height: 60px;
            margin-right: 12px;
        }
        .status {
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #C4C4C4;
            line-height: 60px;
        }
        .download-text {
            position: absolute;
            top: 0;
            right: 15px;
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #4677B9;
            cursor: pointer;
        }
    }
    .base-info {
      position: relative;
      padding: 40px 0 40px;
      .title {
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 40px;
        margin-bottom: 21px;
      }
      .description {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 31px;
        margin-bottom: 20px;
      }
      .other-info {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 22px;
        .label {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 60px;
          margin-right: 39px;
        }
        .hold-unit-url {
          max-height: 44px;
          margin-right: 110px;
        }
        .right {
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 60px;
          margin-right: 110px;
        }
      }
    }
    .not-master-tips {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597A0;
        line-height: 25px;
    }
    .btn-box {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;  
      padding: 80px 0;
    }
  }
}

/deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
/deep/ .el-select-dropdown__item {
  font-size: 10px !important;
}
#app .el-pagination.is-background .el-pager li:not(.disabled).active {
  width: 32px !important;
  height: 32px !important;
}
#app .el-input--prefix .el-input__inner {
  width: 100% !important;
}
.el-button--primary {
  width: 64px;
  height: 40px;
  padding: 0;
  background: #4677b9;
  border-radius: 5px;
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  border: none;
}
</style>
